<template>
	<view>
		<!-- 转换微信小程序后，不兼容v-model语法糖 -->
		<uni-data-picker ref="dataPickerRef" :localdata="props.localdata" :value="props.code" @change="dataChange" v-slot:default="{data, error, options}" @popupopened="popupopened" @popupclosed="popupclosed" :map="props.mapText">
			<view class="line">
				<text>{{ data.length != 0 ? dataText(data) : '请选择' }}</text>
				<icon v-if="isClear" type="clear" size="18" style="margin-left: 15rpx;" @tap.stop="onClear" />
			</view>

		</uni-data-picker>

	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import useBackPress from '@/hooks/useBackPress.js' // 返回阻断函数

	const isClear = ref(false)

	const props = defineProps({
		code: { type: String, default: '' }, // 文字回显用到的码
		localdata: { type: Array, default: () => [] }, // 级联选择用到的数据
		paramType: { type: String, default: 'arr' }, //  参数类型
		mapText: { type: Object, default: { text: 'text', value: 'value' } }, // 映射字段
		clear: { type: Boolean, default: false } //是否可清除
	})

	const emit = defineEmits(['change'])

	onMounted(() => {
		isClear.value = props.clear && props.code
	})

	// 保持与其他数据参数格式一致，所以也改成 e.detail.value的方式
	let data = {
		detail: {
			value: ''
		}
	}
	const dataPickerRef = ref()
	/* 
	 *  参数类型集合  默认为arr
	 *  splicing 拼接模式    适用于支付宝官方行业mccCode 例：mccCode":"A0002_B0015"
	 *  arr  数组模式   大部分省市区县选择，都需要数组  例 areaCode":["120000","120100","120112"]
	 *  last 单值模式   适用于盛付通进件mccCode，它只需要最后一个code  例：mccCode":"4900"
	 * 	oneLevel 级联选择 只有一级  适用于云闪付mcc  拉卡拉pos类型等 
	 */

	// 向父组件传递选择后的数据
	const dataChange = e => {
		let result = '' // 拿code值用
		let resText = '' // 拿文字用
		// 根据参数不同走不同分支   

		if (e.detail.value && e.detail.value.length != 0) {
			if (props.paramType === 'splicing') { // splicing 拼接
				result = e.detail.value[0].value + '_' + e.detail.value[1].value
			} else if (props.paramType === 'arr') { // arr  数组
				result = []
				resText = []
				e.detail.value.forEach(item => {
					result.push(item.value)
					resText.push(item.text)
				})
			} else if (props.paramType === 'last') { // last 单值
				result = e.detail.value[e.detail.value.length - 1].value
			} else if (props.paramType === 'oneLevel') { // oneLevel  只有一级
				result = e.detail.value[0].value
			}

			if (props.clear) {
				isClear.value = true
			} else {
				isClear.value = false
			}

		} else {
			isClear.value = false
		}


		// 父组件在拿到值之后，可以统一走 e.detail.value的方式拿值了
		data.detail.value = result
		data.detail.text = resText
		emit('change', data)
	}

	// data-pciker 回显处理函数
	const dataText = (data) => {
		let result = ''
		data.forEach(item => result += (item.text + '/'))
		result = result.substr(0, result.length - 1) // 截取掉最后一个斜杠

		return result
	}
	/* 

		处理开启弹窗 与 关闭弹窗 的 阻断返回

	 */
	const popupopened = () => {
		// #ifdef H5 || APP-PLUS
		active()
		// #endif
	}
	const popupclosed = () => {
		// #ifdef H5 || APP-PLUS
		inactive()
		// #endif
	}
	const closeEd = () => dataPickerRef.value.hide()

	// #ifdef H5 || APP-PLUS
	const { active, inactive } = useBackPress(closeEd) // onBackPress 阻断返回
	// #endif


	/**
	 * 清除已选项
	 */
	function onClear() {
		dataPickerRef.value.clear()
		isClear.value = false
	}
</script>

<style scoped lang="scss">
	.line {
		display: flex;
		flex-direction: row;
		justify-items: center;
	}
</style>